<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
      } */
    </style>
  </head>
  <body>
    <!-- 输入内容 -->
    <input type="text" placeholder="输入你的内容" />
    <!-- 发送请求 -->
    <button>发送请求</button>
    <!-- 显示结果 -->
    <div></div>

    <script>
      var input = document.querySelector('input')
      var button = document.querySelector('button')
      var div = document.querySelector('div')
      const TYPE_ENTER = 0
      const TYPE_LEAVE = 1
      const TYPE_MSG = 2
      // 演示websocket在浏览器端如何使用
      // H5已经直接提供了websocket的API，所以我们可以直接去使用

      // 1. 创建websocket
      // 参数1： websocket的服务地址
      var socket = new WebSocket('ws://localhost:3000')

      // 2. open: 当和websocket服务连接成功的时候触发
      socket.addEventListener('open', function() {
        div.innerHTML = '连接服务成功了'
      })

      // 3. 主动的给websocket服务发送消息
      button.addEventListener('click', function() {
        var value = input.value
        socket.send(value)
        input.value = ''
      })

      // 4. 接收websocket服务的数据
      socket.addEventListener('message', function(e) {
        var data = JSON.parse(e.data)
        var dv = document.createElement('div')
        dv.innerText = data.msg + '-----' + data.time
        if (data.type === TYPE_ENTER) {
          dv.style.color = 'green'
        } else if (data.type === TYPE_LEAVE) {
          dv.style.color = 'red'
        } else {
          dv.style.color = 'blue'
        }
        div.appendChild(dv)
      })

      socket.addEventListener('close', function() {
        div.innerHTML = '服务断开连接'
      })
    </script>
  </body>
</html>
